<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台管理系统</title>
		<script src="js/jquery-1.9.0.min.js"></script>
	</head>
	<body>
		
		<div>
			<h1>后台管理系统</h1>
			<input id="add" type="button" value="新增用户" onclick="add()" />
		</div>
		<div style="text-align: center; width:100%; padding-left: 10%">
			<table width="70%" class="table">
				<thead>
					<tr><td colspan="11">用户信息表</td></tr>
					<tr>
						<th>编号</th>
						<th>用户名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>密码</th>
						<th>是否为管理员</th>
						<th>权限1</th>
						<th>权限2</th>
						<th>权限3</th>
						<th>操作1</th>
						<th>操作2</th>
					</tr>
				</thead>
				<tbody id="tBodyId">

				</tbody>
			</table>

		</div>
		<span id="username"></span>
		<input id="logout" type="button" value="登出" onclick="logout()" />
	</body>
	<script>
		//是否登录
		$(function() {
			$.ajax({
				url: "http://localhost:8080/admin/show",
				data: null,
				async: false,
				success: function(data) {
					console.log(data);
					if (data.status == 201) {
						alert(data.msg);
						window.location = "http://localhost:8080/demo/login.html"
					}
					if (data.status == 200) {
						alert(data.msg);
						// alert(data.data);//用户名
						$("#username").text("你好!"+data.data).css('color','red');
						selectUserAll();
					}

				},
				error: function(e) {
					alert("出错");
					alert(e.responseText);
					window.location = "http://localhost:8080/demo/login.html"
				},
			})

		})
		
		//退出
		function logout() {
			$.ajax({
				url: "http://localhost:8080/admin/logout",
				data: null,
				success: function(result) {
					alert("退出成功");
					location.reload();
				},
			})
		}

		//查询用户信息
		var selectUserAll = function() {
			let tBody = $("#tBodyId");
			$.ajax({
				url: "http://localhost:8080/admin/selectUserAll",
				success: function(result) {
					if (result.status == 200) {
						console.log(result.data)
						//拿到用的信息
						let list = result.data;
						//迭代list集合 追加新内容
						list.forEach(item => { //item代表集合中的一个元素
							console.log(item.id);
							tBody.append(doCreateRow(item))
							// console.log(tBody)
						})
					}
				}
			})
		}
		//添加表格
		function doCreateRow(item) {
			var a="t"+`${item.id}`;
			return `<tr id="`+a+`">
						<td>${item.id}</td>
						<td>${item.dname}</td>
						<td>${item.dage}</td>
						<td>${item.dsex}</td>
						<td>${item.dpwd}</td>
						<td>${item.dadmin}</td>
						<td>${item.edit_top}</td>
						<td>${item.edit_middle}</td>
						<td>${item.edit_below}</td>
						<td><Button onclick="updataUserById(${item.id})">编辑</td>
						<td><Button onclick="delectUser(${item.id})">删除</td>
					</tr>`
		}
		//删除用户
		function delectUser(id) {
			$.ajax({
				url: "http://localhost:8080/admin/deleteUserById/" + id,
				success: function(result) {
					if (result.status == 200) {
						alert(result.msg)
						window.location.replace("http://localhost:8080/demo/admin.html")
					}
				}
			});
		}
		//新增用户
		function add() {
			{
				window.open('datailadmin.html', 'content',
					'width=480,height=400,top=150,left=280, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no'
				);
			}
		}
		//编辑信息
		function updataUserById(id) {
			{
				window.open('datailadmin.html?id='+id, 'content',
					'width=480,height=400,top=150,left=280, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no'
				);
			}
		}
		
	</script>
</html>
